<template>
	<!-- 我的点赞页面 -->
	<view>
		<navBar :title="'我的点赞'"></navBar>

		<view class="search">
			<view class="input">
				<u-input maxlength="20" placeholder="请输入搜索内容" trim border-color="#2979ff" v-model="keyword" type="text"
					:border="true" />
			</view>
			<view class="icon">
				<image src="../../static/search.png" mode="" @click="search"></image>
			</view>
		</view>

		<u-subsection :list="list" :current="current" :animation="true" bold active-color="#2979ff"
			@change="changeCurrent">
		</u-subsection>

		<view class="more">
			<text @click="toMore">批量管理</text>
		</view>

		<userBlog v-show="current === 0" :userBlog='blogLike' @toBlog="toBlog"></userBlog>

		<userVideo v-show="current === 1" :userVideo="videoLike" @toVideo="toVideo"></userVideo>

		<u-toast ref="uToast" />

		<u-loadmore :load-text="loadText" margin-bottom="50" :status="status" @loadmore="nomore" />

	</view>

</template>

<script>
	import {
		getUserBlogLike,
		getUserVideoLike,
		searchBlogLike,
		searchVideoLike
	} from '../../utils/user.js'

	export default {
		data() {
			return {
				//搜索的关键词
				keyword: '',
				//用户id
				user_id: '',
				pageNum: 1,
				pageSize: 5,
				list: [{
						name: '博客点赞'
					},
					{
						name: '视频点赞'
					}
				],
				current: 0,
				//博客点赞数据
				blogLike: [],
				//视频点赞数据
				videoLike: [],
				status: 'loadmore',
				//改变加载更多的文字
				loadText: {
					loadmore: '点击加载更多内容',
					loading: '正在加载,请喝杯奶茶',
					nomore: '没有更多了'
				},
				searchPageNum: 1,
				searchPageSize: 7
			};
		},
		watch: {
			async keyword(newVal) {
				if (newVal === '') {
					this.status = 'loadmore'
					this.pageNum = 1
					if (this.current === 0) {
						let result = await getUserBlogLike(this.user_id, this.pageNum, this.pageSize)
						if (result.code === 200) {
							this.blogLike = result.data
						}
					} else {
						let result = await getUserVideoLike(this.user_id, this.pageNum, this.pageSize)
						if (result.code === 200) {
							this.videoLike = result.data
						}
					}

				}
			}
		},
		methods: {
			//提示没有更多了
			nomore() {
				this.$refs.uToast.show({
					title: '没有更多了',
					type: 'success',
					duration: 1000
				})
				this.status = 'nomore'
			},
			async getLikeData() {
				this.searchPageNum = 1
				if (this.current === 0) {
					let result = await getUserBlogLike(this.user_id, this.pageNum, this.pageSize)
					if (result.code === 200) {
						console.log(result)
						this.blogLike = [...this.blogLike, ...result.data]
						this.status = 'loadmore'
						if (result.data.length === 0) {
							this.status = 'nomore'
						}
					}
				} else {
					let result = await getUserVideoLike(this.user_id, this.pageNum, this.pageSize)
					if (result.code === 200) {
						console.log(result)
						this.videoLike = [...this.videoLike, ...result.data]
						this.status = 'loadmore'
						if (result.data.length === 0) {
							this.status = 'nomore'
						}
					}
				}

			},
			//改变current
			async changeCurrent(index) {
				this.current = index
				this.pageNum = 1
				if (this.current === 0) {
					let result = await getUserBlogLike(this.user_id, this.pageNum, this.pageSize)
					if (result.code === 200) {
						this.blogLike = result.data
					}
				} else {
					let result = await getUserVideoLike(this.user_id, this.pageNum, this.pageSize)
					if (result.code === 200) {
						this.videoLike = result.data
					}
				}
				this.searchPageNum = 1
				this.status = 'loadmore'
				this.keyword = ''
			},
			//点击去批量管理
			toMore() {
				let type = this.current === 0 ? 'blog' : 'video'
				uni.navigateTo({
					url: `/subpkg/batch/batch?type=${type}&typeNum=${1}`
				})
			},
			//搜索
			async search() {
				if (this.keyword === '') {
					return
				}
				if (this.searchPageNum === 1) {
					this.blogLike = []
					this.videoLike = []
				}
				this.pageNum = 1
				if (this.current === 0) {
					let result = await searchBlogLike(this.user_id, this.keyword, this.searchPageNum, this
						.searchPageSize)
					if (result.code === 200) {
						this.blogLike = [...this.blogLike, ...result.data]
						// this.blogLike.splice(0,1)
						this.status = 'loadmore'
						if (result.code === 200) {
							this.status = 'nomore'
						}
					}
				} else {
					let result = await searchVideoLike(this.user_id, this.keyword, this.searchPageNum, this
						.searchPageSize)
					if (result.code === 200) {
						this.videoLike = [...this.videoLike, ...result.data]
						// this.videoLike.splice(0,1)
						this.status = 'loadmore'
						if (result.code === 200) {
							this.status = 'nomore'
						}
					}
				}
			},
			//去视频详情
			toVideo(id) {
				uni.navigateTo({
					url: `/subpkg/videoDetail/videoDetail?id=${id}`
				})
			},
			//去博客详情
			toBlog(id){
				uni.navigateTo({
					url:`/subpkg/blogDetail/blogDetail?blog_id=${id}`
				})
			},
		},
		//下拉拉到底的时候触发的方法
		onReachBottom() {
			if (this.status === 'nomore') {
				return
			} else {

				this.status = 'loading'
				setTimeout(() => {
					if (this.keyword === '') {
						this.pageNum++
						this.getLikeData()
					} else {
						this.search()
					}
				}, 500)
			}
		},
		onLoad() {
			this.user_id = uni.getStorageSync('userInfo').user_id
			this.getLikeData()
		}
	}
</script>

<style lang="scss" scoped>
	.more {
		padding: 30rpx 0;
		width: 90%;
		margin: 0 auto;
		display: flex;
		flex-direction: row-reverse;
		color: #2979FF;
		font-size: 30rpx;
		font-weight: bold;
	}

	.search {
		width: 90%;
		margin: 0 auto;
		padding: 20rpx 0;
		display: flex;
		align-items: center;

		.input {
			width: 90%;
		}

		.icon {
			width: 10%;
			padding-left: 25rpx;

			image {
				width: 100%;
				height: 45rpx;

			}
		}
	}
</style>
